<template>
  <div class="echart1">
    <!-- 对id进行挂载 -->
    <div id="echart1" class="" style="width: 90%;height:340px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/line';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
export default {
  data() {
    return {
      weekDay: ['第一周','第二周','第三周','第四周','第五周','第六周','第七周'],
      weekData:[
        [200,300,400,500,100,200,300],
        [190,280,380,400,10,100,200]
      ]
    }
  },
  mounted () {
    this.myChart = echarts.init(document.getElementById('echart1'));
    this.initData();
  },
  methods: {
    initData() {
      const colors = ['#5793f3', '#d14a61'];
      const option = {
        colors:colors,
        tooltip: {
            trigger: 'axis'
        },
        legend:{
          data:['缺口额度','认领额度']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['bar', 'line']},
                restore: {},
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: this.weekDay
        },
        yAxis:  {
          type: 'value',
          name: '额度',
          min: 0,
          max: 600,
          position: 'left',
          axisLine: {
              lineStyle: {
                  color: '#999'
              }
          },
          axisLabel: {
              formatter: '{value}',
              align: 'right'
          }
        },
        series:[
          {
              name:'缺口额度',
              type:'line',
              data:this.weekData[0],
              yAxisIndex: 0,
              markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
          },
          {
              name:'认领额度',
              type:'line',
              data:this.weekData[1],
              yAxisIndex: 0,
              markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
          },
        ]
      };
      this.myChart.setOption(option);
    }
  },
  watch: {
    weeekData() {
      this.initData()
    },
    weekDay() {
      this.initData()
    }
  },
}
</script>

<style scoped lang="less">
@import url('@/style/mixin.less');
.echart1{
  margin-top: 30px;
  display: flex;
  justify-content: center;
  border-bottom:1px solid #EBEEF5
}
</style>